import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'

import { Table, Tag, Space, Divider, Button, Modal, message,Spin } from 'antd';
import { getLeaseWithdrawalInfoAction, handleLeaseWithdrawalExaminAction } from '../../store/leaseWithdrawalStore/actionCreators';
import { TimeProcess } from '../../utils';


export default memo(function LeaseWithdrawalMange() {
    const admin = useSelector(state => state.getIn(['user'], shallowEqual));
    // console.log(admin);
    const [examText, setExaminText] = useState(false);
    const {leaseWithdrawalInfo} = useSelector(state => ({
      leaseWithdrawalInfo: state.getIn(["leaseWithdrawal", "leaseWithdrawalInfo"])
    }), shallowEqual)

    // console.log(leaseWithdrawalInfo);
    // console.log("退租界面");
    const dispatch = useDispatch();
    useEffect(() => {
      dispatch(getLeaseWithdrawalInfoAction());
    }, [dispatch, leaseWithdrawalInfo, examText])
    

    const handleExamin = (text, record) => {
      console.log(record);
      const examinInfo = {
        lease_withdrawal_id: record.lease_withdrawal_id,
        admin_name: admin.admin_name,
        admin_number: admin.admin_number
      }
      dispatch(handleLeaseWithdrawalExaminAction(examinInfo));
      setExaminText(!examText);
    }
    

    const columns = [
        {
          title: '寝室号',
          dataIndex: 'room_number',
          key: 'room_number',
        },
        {
            title: '空调编号',
            dataIndex: 'air_number',
            key: 'air_number',
          },
        {
          title: '租赁起始时间',
          dataIndex: 'rental_beginning_date',
          key: 'rental_beginning_date',
          render: time => {
            let realTime = TimeProcess(time);
            return (
              <div>{realTime}</div>
            )
          }
        },
        {
          title: "申请人",
          dataIndex: "house_cheif",
          key: "house_cheif",
          
        },
        {
          title: "申请人联系方式",
          dataIndex: "house_cheif_number",
          key: "house_cheif_number",
          
        },
        {
          title: '已缴租赁费用',
          dataIndex:'rental_payment',
          key: 'rental_payment',
        
        },
        {
          title: '已租赁时间',
          dataIndex:'rental_duration',
          key: 'rental_duration',
        
        },
        {
          title: '退租原因',
          dataIndex:'lease_withdrawal_reason',
          key: 'lease_withdrawal_reason',
        },
        {
          title: '应返还租金',
          dataIndex:'return_payment',
          key: 'return_payment',
        },
        {
          title: '租金返还账户',
          dataIndex:'return_payment_account',
          key: 'return_payment_account',
        },

        {
          title: '审核确认',
          dataIndex: 'examin_state',
          key: 'examin_state',
          render: (text, record) => {
            var displayText = "审核"
            // console.log(text);
            if(text == 1)
              displayText = "已审核"
            return (
              <>
                <Button danger={!text} onClick={e => handleExamin(text, record)}>{displayText}</Button>
              </>
            )

          }
        }
      ];


    return (
        <div>
            <Divider orientation="left">退租信息管理</Divider>
            <div>
                <Table columns={columns} dataSource={leaseWithdrawalInfo} style={{minHeigh:"100%"}} pagination={{defaultPageSize:'8'}}/>
            </div>
        </div>
    )
})